<template>
	<h1>历史专家</h1>
	<div class="experts-page">
		<el-row :gutter="20">
			<el-col :span="8" v-for="expert in experts" :key="expert.name">
				<el-card>
					<img :src="expert.image" class="expert-image" alt="expert.name">
					<div class="expert-info">
						<router-link :to="`/overview/${expert.nickname}`" class="expert-name">
						  {{ expert.name }}
						</router-link>
						<!-- <span>{{ expert.name }}</span> -->
						<div>{{ expert.birthdate }}年生人</div>
						<p>{{ expert.position }}</p>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import localImage1 from '@/assets/yang.webp'
	import localImage2 from '@/assets/zhou.webp'
	import localImage3 from '@/assets/su.webp'

	export default {
		data() {
			return {
				experts: [{
						nickname:'yang',
						name: '杨天行',
						birthdate: '1935',
						position: '原北京大学第二分校副校长及校长',
						image: localImage1 // 替换为实际图片路径
					},
					{
						nickname:'zhou',
						name: '周锡令',
						birthdate: '1935',
						position: '原北京信息工程学院院长',
						image: localImage2 // 替换为实际图片路径
					},
					{
						nickname:'su',
						name: '苏东庄',
						birthdate: '1932',
						position: '原北京信息工程学院副院长',
						image: localImage3 // 替换为实际图片路径
					}
				]
			};
		}
	};
</script>

<style scoped>
	h1 {
		color: #000;
		margin-bottom: 10px;
		/* 与 span 保持间距 */
	}

	.experts-page {
		width: 100%;
		border: none;
		/* 确保无边框 */
	}

	.box-card {
		margin-bottom: 20px;
		border: none;
		/* 确保无边框 */
	}

	::v-deep(.el-card__body) {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0;

		border: none !important;

	}

	.expert-image {

		width: 100%;
		height: 220px;
		/* 可根据实际情况调整高度 */
		object-fit: cover;
		/* 保证图片不变形，自动裁剪填满 */
		display: block;
	}

	.expert-info {
		padding: 5px;
		font-size: 14px;
		/* 默认是16px，改小一点更协调 */
		color: #333;
		line-height: 1.5;
		text-align: center;
	}
	.expert-name{
		font-weight: bold;
		color: #000;
		font-size: 16px;
		/* 姓名稍微大一点 */
		text-decoration: underline; /* 添加下划线 */
	}
	.expert-info span {
		font-weight: bold;
		
		font-size: 16px;
		/* 姓名稍微大一点 */
	}
</style>
